<template>
	<view class="product-list">
		<view class="item dir-left-nowrap" v-for="(item, key) in goods_list" :key="key" @click="route_go(item)">
			<view class="box-grow-0 cover-pic">
				<image class="pic" :src="item.cover_pic"></image>
				<view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
					<image mode="aspectFill"
						:src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
				</view>
				<view class="out-miaosha" v-if="item.sign == 'miaosha'" :class="theme + '-m-back ' + theme">
					秒杀商品
				</view>
			</view>
			<view class="cont dir-top-nowrap main-between">
				<text class="name t-omit-two">{{item.name}}</text>
				<!-- 会员价 -->
				<!-- <view class="box-grow-0 cross-bottom" v-if="item.is_level == 1 && item.is_negotiable != 1">
					<app-member-price :price="item.level_price"></app-member-price>
				</view> -->
				<!-- <app-sup-vip class="margin-vip" :is_vip_card_user="item.vip_card_appoint.is_vip_card_user"
					v-if="item.vip_card_appoint.discount" :discount="item.vip_card_appoint.discount">
				</app-sup-vip> -->
				<view class="price-but dir-left-nowrap main-between cross-center">
					<view class="price dir-top-nowrap">
						<text class="price_content" :class="theme+ '-m-text ' + theme">
							{{item.sign == 'miaosha' ? '秒杀价' : '售价'}}：{{item.price_content}}</text>
						<!-- <text class="sales">{{item.sales}}</text> -->
					</view>
					<view class="but" :class="theme">
						<view
							v-if="(item.is_negotiable != 1 && item.goods_stock > 0 && item.sign == '') || (item.is_negotiable != 1 && item.goods_stock > 0 && item.sign == 'miaosha' && item.msdetail.miaosha_status == 1)"
							class="box-grow-0 cart-box">
							<view class="goods-cart">
								<cats-image :theme="theme" @click.stop.native="specification(item)"></cats-image>
							</view>
						</view>
						<view class="butgray" v-if="item.sign == 'miaosha' && item.msdetail.miaosha_status == 0">
							已结束
						</view>
						<view class="butgray" v-if="item.sign == 'miaosha' && item.msdetail.miaosha_status == 2">
							未开始
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import catsImage from './cats-image.vue';
	import appPrice from '../../../components/page-component/goods/app-price.vue';

	export default {
		name: "product-list",
		props: [`goods_list`, `theme`],
		components: {
			catsImage,
			appPrice
		},
		data() {
			return {
				previewUrl: '',
				submitUrl: '',
				attrGroup: [],
				selectAttr: {},
				item: {},
				show: 0
			}
		},
		computed: {
			...mapGetters('mallConfig', {
				getVideo: 'getVideo',
				isShowCart: 'getShowCart'
			}),
			...mapState({
				appSetting: state => state.mallConfig.mall.setting,
				appImg: state => state.mallConfig.__wxapp_img.mall
			})
		},
		methods: {
			specification(goods) {
				if (goods.sign === 'mch') {
					this.previewUrl = this.$apiSol.mch.order_preview;
					this.submitUrl = this.$apiSol.mch.order_submit;
				} else {
					this.previewUrl = '';
					this.submitUrl = '';
				}
				this.$emit('attr', this.previewUrl, this.submitUrl, goods.attr_groups, goods);
			},
			route_go(item) {
				if (item.sign == 'miaosha') {
					uni.navigateTo({
						url: '/plugins/mch_solitaire/seckillgoods/seckillgoods?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/plugins/mch_solitaire/togoods/togoods?id=' + item.id
					})
				}
			},
			onAttr(data) {
				this.selectAttr = data;
			}
		}
	}
</script>

<style scoped lang="scss">
	.cover-pic {
		position: relative;
		border-radius: #{8upx};
		margin-right: #{20upx};
	}

	.out-miaosha {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 150rpx;
		height: 30rpx;
		color: #FFF;
		font-size: 16rpx;
		text-align: center;
		line-height: 30rpx;
	}

	.out-dialog {
		width: #{150upx};
		height: #{150upx};
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, .5);

		image {
			width: #{150upx};
			height: #{150upx};
		}
	}

	.item {
		width: #{504upx};
		border-bottom: #{1upx} solid #e2e2e2;
		margin: #{20upx 0 0 0};
		padding: 0 0 20rpx;
	}

	.cover-pic {
		width: #{150upx};
		height: #{150upx};

		border-radius: #{8upx};
		margin-right: #{20upx};
		position: relative;
	}

	.pic {
		width: #{150upx};
		height: #{150upx};
	}

	.out-dialog {
		width: #{150rpx};
		height: #{150rpx};
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, .5);

		image {
			width: #{150rpx};
			height: #{150rpx};
		}
	}

	.cont {
		width: #{334upx};
	}

	.name {
		font-size: 28upx;
		line-height: 38upx;
		color: #353535;
		margin-top: #{5upx};
	}

	.margin-vip {
		margin: #{8upx 0 0 0};
	}

	.price {
		// margin-left: #{10rpx};
		font-size: $uni-font-size-weak-one;
	}

	.price-but {
		margin-bottom: #{20upx};
		margin-top: #{8upx};
	}

	.butgray {
		font-size: 24rpx;
		color: #999999;
	}

	.price_content {
		font-size: #{28upx};
		line-height: 1;
		text-align: left;
	}

	.cart-box {
		width:#{56rpx};
		height:#{56rpx};
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		transform: rotateZ(360deg);
	}

	.sales {
		font-size: #{20upx};
		line-height: 1;
		color: #999999;
		margin-top: #{5upx};
		padding-left: #{5upx};
	}

	.goods-cart {
		width:#{56rpx};
		height:#{56rpx};
		/*position: absolute;*/
		/*top: 50%;*/
		/*left: 50%;*/
		border: none;

	}
</style>
